<template>
    <div class="icon-item flex-center" ref="scrollRef" :style="{ perspective: iconPerspective[size as string] }">
        <div style="position: relative;transition:all .3s ease-out" :style="{'transform':`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`}">
            <i class="icon-add flex-center" @click="handleAdd">
                <el-icon color="white" size="14">
                    <Plus />
                </el-icon>
            </i>
            <div :class="`${iconSize}`">
                <div class="icon-body" :style="{background: bgColor }">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'

const emits = defineEmits(['add'])

const props = defineProps({
    size:String,
    bgColor:{
        type:String,
        default:'#fff'
    }
})

const iconSize = 'icon-size-' + props.size

const iconPerspective:Record<string,string> ={
    '1x1':'100px',
    '1x2':'200px',
    '2x1':'200px',
    '2x2':'400px',
    '2x4':'800px'
}

const handleAdd = () => {
    emits('add')
}

//设div中心为坐标轴原点，通过比例计算图标旋转角度
const scrollRef = ref<HTMLDivElement>()
const rotateX = ref(0)
const rotateY = ref(0)
const maxRotate = 10
const iconSkew = (e:MouseEvent) => {
    const height = scrollRef.value!.clientHeight / 2
    const width = scrollRef.value!.clientWidth / 2
    const x = e.offsetX - width
    const y = e.offsetY - height
    rotateX.value = -maxRotate*y/height
    rotateY.value = maxRotate*x/width
}

onMounted(() => {
    scrollRef.value?.addEventListener('mousemove',iconSkew)
})
</script>

<style scoped lang="scss">
.icon-item {
    width: 100%;
    height: 100%;
    --border-radius: 16px;
    --icon-size: 60px;
    --icon-gap:30px;
    --boxShadow: 0 4px 32px 0 rgba(0, 0, 0, 0.15);

    &:hover{
        .icon-add{
            opacity: 1;
        }
    }

    .icon-add {
        position: absolute;
        height: 22px;
        width: 22px;
        top: -5px;
        left: -5px;
        background-color: #42d659;
        border-radius: 50%;
        z-index: 10;
        cursor: pointer;
        opacity: 0;
        transform: all .2s;
    }

    .icon-size-1x1 {
        height: var(--icon-size);
        width: var(--icon-size);
    }

    .icon-size-1x2 {
        width: calc(var(--icon-size)*2 + var(--icon-gap));
        height: var(--icon-size);
    }

    .icon-size-2x1 {
        width: var(--icon-size);
        height: calc(var(--icon-size)*2 + var(--icon-gap));
    }

    .icon-size-2x2 {
        width: calc(var(--icon-size)*2 + var(--icon-gap));
        height: calc(var(--icon-size)*2 + var(--icon-gap));
    }
    .icon-size-2x4{
        width: calc(var(--icon-size)*4 + var(--icon-gap)*3);
        height: calc(var(--icon-size)*2 + var(--icon-gap));
    }
    .icon-body {
        width: 100%;
        height: 100%;
        box-shadow: var(--boxShadow);
        border-radius: var(--border-radius);
        overflow: hidden;
    }
}
</style>